<script setup lang="ts">
import {useCounterStore} from "@/stores/counter";
import {consultation} from "@/http/Personal center";
import {ref} from "vue";
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const flag=ref(true)
const rese=ref(false)
// 评价星星
const value = ref(3);
// 评论字数
const message = ref('');
const onClickLeft = () => history.back();
const usifo=useCounterStore()
const id=ref('')
id.value=usifo.consultid
// console.log(id.value)

const detailInfo=ref({})
consultation(id.value).then(res=>{
    // console.log(res)
    if (res.code==200){
        detailInfo.value=res.data
    }
})

let baseUrl = 'http://192.168.5.120:8090'

// 关闭遮罩层
function closeed(){
    show.value = false;
}
// 关闭提交反馈意见
function submitd(){
    show.value = false;
    flag.value=false
    rese.value=true
}
</script>

<template>
<div>
    <div>
        <van-nav-bar
                left-text="咨询详情"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="two">
            <div class="Teacher">
                <div class="xlzu">心理咨询师</div>
                <div class="buttom">
                    <div class="zheine">{{detailInfo.psyTeacher?.name}}</div>
                    <div class="bujte">
                        <div class="Consultation">
                            <div class="ziune">{{detailInfo.psyTeacher?.count}}人咨询过</div>
                            <div class="yumi">
                                <img :src="baseUrl+detailInfo.psyTeacher?.avatar" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time">
                <div class="toew">
                    <div class="left">
                        <div class="timeone">
                            咨询时间
                        </div>
                        <div class="day">
                            <div class="tieme">{{detailInfo.psyScheduling?.date}}</div><span>星期三</span>
                        </div>
                        <div class="timew">
                            <div class="quje">{{detailInfo.psyScheduling?.startTime}}-{{detailInfo.psyScheduling?.endTime}}</div><span>({{detailInfo.duration}}分钟)</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="ziye">
                            <van-icon name="friends" /><span>个人咨询</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Mode">
                <div class="zxuen">
                    <div class="Modeone">咨询方式</div>
                    <div class="phone">{{detailInfo.mode}}</div>
                </div>
                <div class="woonsa">已结束</div>
            </div>
            <div class="zixass">
                <div class="phone">咨询地址</div>
                <div class="Address">{{detailInfo.psyTeacher?.location}}</div>
            </div>
        </div>
        <div class="three">
            <div class="Contentw">
                <van-icon name="comment-o" />咨询内容
            </div>
            <div class="Frame">
                {{detailInfo.content}}
            </div>
        </div>
        <div class="three">
            <div class="Contentw">
                <van-icon name="comment-o" />老师建议
            </div>
            <div class="Frame">
               {{detailInfo.teacherSuggest}}
            </div>
        </div>
        <div class="start" v-if="flag">
            <van-button type="primary" size="normal" id="chengs" @click="showPopup">增添反馈
            </van-button>
            <van-popup v-model:show="show" >
                <div class="box">
                    <div class="top">
                        添加反馈信息
                    </div>
                    <div class="boxone">
                        <div>满意度</div>
                        <van-rate
                            v-model="value"
                            :size="25"
                            color="#ffd21e"
                            void-icon="star"
                            void-color="#eee"
                        />
                        <div>一般</div>
                    </div>
                    <div class="pingj">
                        <van-cell-group inset>
                            <van-field
                                v-model="message"
                                rows="2"
                                autosize
                                type="textarea"
                                maxlength="200"
                                placeholder="请输入留言"
                                show-word-limit
                            />
                        </van-cell-group>
                    </div>
                    <div class="Button">
                        <van-button type="primary" @click="closeed">取消</van-button>
                        <van-button type="primary" @click="submitd">提交</van-button>
                    </div>
                </div>
            </van-popup>
        </div>
        <div class="three" v-if="rese">
            <div class="Contentw">
                <van-icon name="comment-o" />咨询反馈
            </div>
            <div class="Frame">
                {{message}}
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.two{
    width: 96%;
    margin: 10px auto;
    height:270px;
    padding: 10px;
    box-sizing:border-box;
    background-color:white;
    .Teacher{
        height: 55px;
        margin-bottom: 10px;
        border-bottom: 1px solid #F2F3F4;
        .xlzu{
            font-size: 12px;
            color:rgba(0, 0, 0, 0.4);
        }
        .buttom{
            height: 10px;
            display: flex;
            justify-content: space-between;
            .zheine{
                margin-top: 5px;
                font-size: 18px;
            }
            .Consultation{
                width: 115px;
                display: flex;
                justify-content: space-between;
                .ziune{
                    margin-top: 10px;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.4);
                }
                .yumi{
                    width: 30px;
                    height: 30px;
                    border-radius: 15px;
                    background-color: #9e75f5;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .time{
        height: 68px;
        .toew{
            display: flex;
            justify-content: space-between;
            .left{
                width: 54%;
                .timeone{
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.4);
                }
                .day{
                    width: 80%;
                    display: flex;
                    justify-content: space-between;
                    .tieme{
                        margin-top: 5px;
                    }
                    span{
                        margin-top: -2px;
                        font-size: 18px;
                        font-weight: 700;
                    }
                }
                .timew{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .quje{
                        font-size: 18px;
                        color: #101010;
                        font-weight: 700;
                        margin-top: 5px;
                    }
                    span{
                        margin-top: 5px;
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.4);
                    }
                }
            }
            .right{
                width: 30%;
                .ziye{
                    margin-top: 25px;
                    span{
                        font-size: 14px;
                        color: rgba(102, 102, 102, 1);
                    }
                }


            }
        }



    }
    .Mode{
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #F2F3F4;
        padding-top: 7px;
        padding-bottom: 7px;
        .zxuen{
            width: 30%;
            border-radius: 15px 0 0 15px;
            .Modeone{
                font-size: 12px;
                color: rgba(0, 0, 0, 0.4);
                margin-bottom: 10px;
            }
            .phone{
                font-size: 18px;
                font-weight: 700;
            }
        }
        .woonsa{
            width: 25%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px 0 0 15px;
            color: #ffffff;
            font-size: 14px;
            margin-top: 16px;
            background-color: #077AC0;
            border-bottom: 1px solid #F2F3F4;
        }
    }
    .zixass{
        padding: 5px 0;
        height: 44px;
        border-top: 1px solid #F2F3F4;
        .phone{
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
        }
        .Address{
            font-size: 18px;
            font-weight: 700;
        }
    }
}
.three{
    width: 96%;
    margin: 10px auto;
    height: 120px;
    padding: 10px;

    box-sizing: border-box;
    background-color: white;
    :deep(.van-icon){
        margin-right: 10px;
    }
    .Frame{
        height: 75px;
        margin-top: 10px;
    }
}
.start{
    text-align: center;
    :deep(.van-popup--center){
        border-radius: 10px;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: white;
        .top{
            width: 100%;
            height: 50px;
            background-color: #1c94fc;
            line-height: 50px;
            color: white;
        }
        .boxone{
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }
        .pingj{
            width:250px;
            height: 100px;
            border: 1px solid black;
            margin:15px auto;
            padding:10px;
            :deep(.van-cell){
                padding:0;
            }
            :deep(.van-field__control){
                height: 70px !important;
            }
        }
        .Button{
            display: flex;
            justify-content: space-around;
            :deep(.van-button--normal){
                width: 100px;
            }
        }
    }

    #chengs{
        width: 60%;
    }
}
</style>